<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/new_file.css" />
		<script type="text/javascript" src="js/jquery-3.0.0.js" ></script>
		<style type="text/css"></style>
		<title>TATA衣服</title>
	</head>

	<body style="margin: 0;padding: 0;font-family: '微软雅黑';">
		<div class="logobox">
			<img src="img/下载.png" />
			<hr />
		</div>
		<div class="daohangbox">
			<a>
				<div class="somebox1">首页</div>
				<div class="somebox2">HOME</div>
			</a>
			<a>
				<div class="somebox1">女士专区</div>
				<div class="somebox2">WOMEN</div>
			</a>
			<a>
				<div class="somebox1">男士专区</div>
				<div class="somebox2">MEN</div>
			</a>
			<a>
				<div class="somebox1">产品总览</div>
				<div class="somebox2">PRODUCT</div>
			</a>
			<a>
				<div class="somebox1">明星代言</div>
				<div class="somebox2">STAR</div>
			</a>
			<a>
				<div class="somebox3"></div>
				<div class="somebox3" style="border-right: none;"></div>
			</a>
		</div>
		<div class="bannerbox">
			<div class="bannerbox1">
				<img class="123" src="img/3.png" />
				<img class="display 123" src="img/2.png" />
				<img class="display 123" src="img/1.png" />
				
				<ul>
					<li class="one"></li>
					<li class="one"></li>
					<li class="one"></li>
				</ul>
			</div>
		</div>
		<script>
			$(function(){
				$(".one").mouseover(function(){
					var wozuishuai=$(".one").index(this);
					$(".123").hide();
					$(".123").eq(wozuishuai).show();
				})
			})
		</script>
		<div class="zhanshibox">
			<div class="zhanshi">
				<div class="tupian"><img src="img/西1.png"></div>
				<div class="tupian"><img src="img/运1.png"></div>
				<div class="tupian"><img src="img/牛1.png"></div>
				<div class="tupian"><img src="img/风1.png"></div>
				<div class="tupian"><img src="img/羽1.png"></div>
			</div>
			<div class="yincang display" style="position: absolute;left: 32px;top:753px;background:black;font-size: 12px;color: #676767;">
				<div class="yincang1">
					<img src="img/西2.png" />
					<img src="img/西3.png" />
					<img src="img/西4.png" />
				</div>
			</div>
			<div class="yincang display" style="position: absolute;left: 213px;top:753px;background:black;font-size: 12px;color: #676767;">
				<div class="yincang1">
					<img src="img/运2.png" />
					<img src="img/运3.png" />
					<img src="img/运4.png" />
				</div>
			</div>
			<div class="yincang display" style="position: absolute;left: 395px;top:753px;background:black;font-size: 12px;color: #676767;">
				<div class="yincang1">
					<img src="img/牛2.png" />
					<img src="img/牛3.png" />
					<img src="img/牛4.png" />
				</div>
			</div>
			<div class="yincang display" style="position: absolute;left: 576px;top:753px;background:black;font-size: 12px;color: #676767;">
				<div class="yincang1">
					<img src="img/风2.png" />
					<img src="img/风3.png" />
					<img src="img/风4.png" />
				</div>
			</div>
			<div class="yincang display" style="position: absolute;left: 757px;top:753px;background:black;font-size: 12px;color: #676767;">
				<div class="yincang1">
					<img src="img/羽2.png" />
					<img src="img/羽3.png" />
					<img src="img/羽4.png" />
				</div>
			</div>
		</div>
		<script>
			$(function(){
				$(".tupian").mouseenter(function(){
					var q=$(".tupian").index(this);
					$(".yincang").hide();
					$(".yincang").eq(q).slideDown();
				});
				$(".yincang").mouseleave(function(){
					var q=$(".yincang").index(this);
					$(".yincang").eq(q).slideUp();
				});
			
			})
		</script>
		<div class="wei">
			<div class="weibox">
				<div class="xia">
					<div class="xia1">
						<div class="xia11"><img src="img/123123123.png"></div>
						<div class="xia12">
							<p>更棒的是剪裁合宜</p>
							<p>新颖但又不失稳重</p>
							<p>再搭上一条红领带</p>
							<p>实为成功男士上班交谊</p>
						</div>
					</div>
					<div class="xia1">
						<div class="xia11"><img src="img/22222.png"></div>
						<div class="xia12">
							<p>完美的组合</p>
							<p>优美的线条</p>
							<p>衬托出您的青春</p>
							<p>给您无限激情活力</p>
						</div>
					</div>
					<div class="xia1">
						<div class="xia11"><img src="img/33333.png"></div>
						<div class="xia12">
							<p>都市小牛仔，生活最精彩</p>
							<p>率真，帅气，源于本性</p>
							<p>西部风情  尽在西部牛仔</p>
							<p>情定牛仔，西部去流浪</p>
						</div>
					</div>
					<div class="xia1">
						<div class="xia11"><img src="img/44444.png"></div>
						<div class="xia12">
							<p>出门千里，始终温暖</p>
							<p>至薄至暖，让您轻装前行</p>
							<p>展示线条，舒适的温度</p>
							<p>温暖一直伴你而行</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>